<template>
  <section class="component agent-apply-button">
    <el-button
      @click="onClickButton"
      class="list-button white-button"
      size="mini"
      type="text"
      v-if="menuChannel !== 15 && menuChannel !== 16 && menuChannel !== 44 && menuChannel !== 34"
      >申请代理人</el-button
    >
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="申请代理人"
      :visible.sync="dialog"
      append-to-body
      width="800px"
      @closed="closed"
    >
      <el-form :model="listQuery" :rules="rules" ref="listQuery">
        <el-form-item label="代理经办代号" label-width="110px" prop="currentAgentCode">
          <el-select v-model="listQuery.currentAgentCode" size="small" clearable>
            <el-option v-for="(item, index) in agetntCodeArr" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="代办截止时间" label-width="110px" prop="leaveDueDate">
          <el-date-picker
            type="date"
             :picker-options="$common.datePickDisabledDate(1)" 
            :editable="false"
            v-model="listQuery.leaveDueDate"
            value-format="yyyy-MM-dd 23:59:59"
            placeholder="选择日期时间"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="申请原因" label-width="110px" prop="applyDescription">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="listQuery.applyDescription" size="small" class="textarea" clearable />
        </el-form-item>
        <el-form-item class="btn">
          <el-button class="white-button" size="mini" @click="closed">关闭</el-button>
          <el-button type="primary" size="mini" @click="save">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { State, namespace } from "vuex-class";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import { Form } from "element-ui";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components:{}
})
export default class AgentApplyButton extends Vue {
  @Dependencies(CaseInfoService) private CaseInfoService: CaseInfoService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private caseNo;
  @Prop({ type: String }) private applyType;
  private listQuery: any = {
    currentAgentCode: '',
    leaveDueDate: '',
    applyDescription: '',
    applyCategory: 'AGENT_APPLY',
    caseNumber: ''
  }
  private agetntCodeArr: any = []
  private dialog: boolean = false;
  private rules: any =  {
    currentAgentCode: [{ required: true, message: '请选择代理经办代号', trigger: 'change' }],
    leaveDueDate: [{ required: true, message: '请选择代办截止时间', trigger: 'change' }],
    applyDescription: [{ required: true, message: '请输入申请原因', trigger: 'blur' }],
  }

  private mounted() {
    this.getAgentCode()
  }

  private getAgentCode() {
    // console.log('6666666666this.caseId', this.caseId);
    // const query = {
    //   caseId: this.caseId
    // }
    this.CaseInfoService.caseAgentAllUser(this.caseId).subscribe(data => {
      this.agetntCodeArr = data.handlerCodeList
    })
  }

  private onClickButton() {
    this.dialog = true;
  }
  
  private save() {
    this.listQuery['caseNumber'] = this.caseNo
    const dataForm = this.$refs["listQuery"] as Form;
    dataForm.validate(success => {
      if (!success) {
        return;
      }
      this.CaseInfoService.caseApplyAgent(this.listQuery).subscribe(data => {
        this.$message.success('保存成功')
        this.closed()
      }, err => {
        this.$message.error('保存失败')
      })
    });
  }

  private closed() {
    this.dialog = false;
    const dataForm = this.$refs["listQuery"] as Form;
    dataForm.resetFields()
  }
}
</script>
<style lang="less" scoped>
  .btn{
    text-align: center;
    margin-top: 26px;
    .el-button{
      width: 100px;
    }
  }
  .textarea{
    width: 80% !important;
  }
</style> label-width="110px"
